<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>编辑文章</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/static/css/index.css}">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .outer {
            padding: 15px;
            max-width: 80%;
            margin: auto;
        }

        .el-tag + .el-tag {
            margin-left: 10px;
        }

        .button-new-tag {
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }

        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }
    </style>
</head>
<body>
<div class="outer">
    <div id="app">

        <div class="demo-input-suffix" style="margin-bottom: 10px;margin-top: 10px">
            <el-input
                    placeholder="请输入标题"
                    v-model="input_title"
                    maxlength="100"
                    show-word-limit
                    clearable>
            </el-input>
        </div>


    </div>
    <div id="editor">


    </div>
    <div class="app">
        <el-divider content-position="left">文章分类</el-divider>
        <div>
            <el-tag
                    :key="tag"
                    v-for="tag in dynamicTags"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)">
                {{tag}}
            </el-tag>
            <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
            >
            </el-input>
            <el-button class="button-new-tag" size="small" @click="showInput">+ 新增分类</el-button>
        </div>


        <el-divider content-position="left">发布方式</el-divider>
        <div>
            <el-radio v-model="put_mode" label="1">私密</el-radio>
            <el-radio v-model="put_mode" label="2">公开</el-radio>
        </div>

        <el-divider content-position="left">文章类型</el-divider>
        <div>
            <el-radio v-model="article_type" label="1">原创</el-radio>
            <el-radio v-model="article_type" label="2">转载</el-radio>
        </div>
        <el-divider content-position="left"></el-divider>
        <el-row>
            <el-button type="primary">发布</el-button>
            <el-button>返回</el-button>
        </el-row>


    </div>
</div>
</body>
<script th:src="@{/static/ckeditor/ckeditor.js}"></script>
<!-- 先引入 Vue -->
<script th:src="@{/static/js/vue.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<!-- 引入组件库 -->
<script th:src="@{/static/js/index.js}"></script>
<script>
    CKEDITOR.replace('editor');

    function getData() {
        var content = CKEDITOR.instances.editor.getData(); //获取值
        console.log(content);
    }

    var vue1 = new Vue({
        el: '.app',
        data() {
            return {
                put_mode: '1',
                article_type: '1',
                dynamicTags: ['java', 'html', 'js'],
                inputVisible: false,
                inputValue: ''
            }
        },
        created() {
        },
        methods: {
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },
            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            }

        },

    })

    var vue2 = new Vue({
        el: '#app',
        data() {
            return {
                input_title: '',
            }
        },
        created() {
        },
        methods: {},

    })
</script>


</html>